package net.yambal.component
{
	import mx.collections.ArrayCollection;
	import mx.containers.Accordion;
	import mx.containers.Canvas;
	import mx.containers.HBox;
	import mx.containers.VBox;
	import mx.controls.Button;
	import mx.controls.ColorPicker;
	import mx.controls.ComboBox;
	import mx.controls.VSlider;
	import mx.events.FlexEvent;
	import mx.events.SliderEvent;

	public class FlexDrawA extends Canvas
	{
		public var back_ground:Canvas;
		private var drawing_canvas:Canvas;
		private var me_catch_canvas:Canvas;
		private var pen_color_picker:ColorPicker;
		private var line_width_combo:ComboBox;
		private var tool_box:HBox;
		private var tool_box_switch:Button;
		private var tool_box_up:Button;
		private var tool_box_down:Button;
		private var bg_color_picker:ColorPicker;
		private var bg_alpha_slider:VSlider;
		private var undo_btm:Button;
		
		private var tool_box_width:int = 50;
		private var _bg_color:uint = 0xFFFFFF;
		
		
		[Bindable]
		private var thins:ArrayCollection = new ArrayCollection([
		{label:"1", data:1},
		{label:"2", data:2},
		{label:"3", data:3},
		{label:"4", data:4},
		{label:"5", data:5},
		{label:"9", data:9}]);
		private var isToolboxOpen:Boolean;
		
		private var current_layer:Canvas;
		private var isDrawStarted:Boolean = false;
		private var draw_x:Number;
		private var draw_y:Number;
		
		/**
		 * 初期化
		 **/
		public function FlexDrawA()
		{
			super();
			this.horizontalScrollPolicy = "off";
			this.verticalScrollPolicy = "off";
			
			this.back_ground = new Canvas();
			this.back_ground.setStyle("horizontalCenter", 0);
			this.back_ground.setStyle("verticalCenter", 0);
			this.addChild(this.back_ground);
			
			// -------------------------------------
			// DrawingCanvas
			this.drawing_canvas = new Canvas();
			this.drawing_canvas.setStyle("top", 0);
			this.drawing_canvas.setStyle("left", 0);
			this.drawing_canvas.setStyle("bottom", 0);
			this.drawing_canvas.setStyle("right", 0);
			this.drawing_canvas.setStyle("backgroundColor", this._bg_color);
			this.drawing_canvas.setStyle("backgroundAlpha", 1);
			this.drawing_canvas.horizontalScrollPolicy = "off";
			this.drawing_canvas.verticalScrollPolicy = "off";
			this.addChild(this.drawing_canvas);
			
			// -------------------------------------
			// MouseEventCatchCanvas
			this.me_catch_canvas = new Canvas();
			this.me_catch_canvas.setStyle("top", 0);
			this.me_catch_canvas.setStyle("left", 0);
			this.me_catch_canvas.setStyle("bottom", 0);
			this.me_catch_canvas.setStyle("right", 0);
			this.me_catch_canvas.setStyle("backgroundColor", 0xFFFFFF);
			this.me_catch_canvas.setStyle("backgroundAlpha", 0.01);
			this.addChild(this.me_catch_canvas);
			
			// -------------------------------------
			// ToolBox
			// - - - - - - - - - - - - - - - - - - -
			// Pen-Tool
			// PenColorPicker
			this.pen_color_picker = new ColorPicker();
			this.pen_color_picker.width = this.tool_box_width;
			// LineWidth-Combo
			this.line_width_combo = new ComboBox();
			this.line_width_combo.dataProvider = this.thins;
			this.line_width_combo.width = this.tool_box_width;
			
			// Undo-Button
			this.undo_btm = new Button();
			this.undo_btm.width = 50;

			var pen_tool:VBox = new VBox();
			pen_tool.label = "pen";
			pen_tool.horizontalScrollPolicy = "off";
			pen_tool.verticalScrollPolicy = "off";
			pen_tool.width = this.tool_box_width;
			pen_tool.addChild(this.pen_color_picker);
			pen_tool.addChild(this.line_width_combo);
			pen_tool.addChild(this.undo_btm);
			
			// - - - - - - - - - - - - - - - - - - -
			// BG-Tool
			// BGColorPicker
			this.bg_color_picker = new ColorPicker();
			this.bg_color_picker.selectedColor = this._bg_color;
			this.bg_color_picker.width = this.tool_box_width;
			//
			this.bg_alpha_slider = new VSlider();
			this.bg_alpha_slider.height = 50;
			this.bg_alpha_slider.minimum = 0;
			this.bg_alpha_slider.maximum = 100;
			this.bg_alpha_slider.value = 100;
			this.bg_alpha_slider.liveDragging = true;
			
			var bg_tool:VBox = new VBox();
			bg_tool.label = "bg";
			bg_tool.horizontalScrollPolicy = "off";
			bg_tool.verticalScrollPolicy = "off";
			bg_tool.width = this.tool_box_width;
			bg_tool.addChild(bg_color_picker);
			bg_tool.addChild(this.bg_alpha_slider);
			
			var acd_s:Accordion = new Accordion();
			acd_s.width = this.tool_box_width;
			acd_s.addChild(pen_tool);
			acd_s.addChild(bg_tool);
			
			// - - - - - - - - - - - - - - - - - - -
			// ToolBoxの位置操作
			// 開閉
			this.tool_box_switch = new Button();
			this.tool_box_switch.width = 20;
			this.tool_box_switch.setStyle("top", 20);
			this.tool_box_switch.setStyle("bottom", 20);
			// 上
			this.tool_box_up = new Button();
			this.tool_box_up.width = this.tool_box_up.height = 20;
			this.tool_box_up.setStyle("top", 0);
			// 下
			this.tool_box_down = new Button();
			this.tool_box_down.width = this.tool_box_up.height = 20;
			this.tool_box_down.setStyle("bottom", 0);
			
			var tbr:Canvas= new Canvas();
			tbr.width = 20;
			tbr.setStyle("top", 0);
			tbr.setStyle("bottom", 0);
			tbr.setStyle("verticalGap",0);
			
			tbr.addChild(this.tool_box_up);
			tbr.addChild(this.tool_box_switch);
			tbr.addChild(this.tool_box_down);
			
			this.tool_box = new HBox();
			this.tool_box.setStyle("horizontalGap",0);
			this.tool_box.addChild(acd_s);
			this.tool_box.addChild(tbr);
			
			this.addChild(this.tool_box);
			
			// -------------------------------------
			// Event
			this.isToolboxOpen = true;
			this.tool_box_switch.addEventListener(FlexEvent.BUTTON_DOWN, this.onClickToolBoxBtm);

			this.bg_color_picker.addEventListener("change", this.onChangeBGColor);
			this.bg_alpha_slider.addEventListener(SliderEvent.CHANGE, this.onChangeBGAlpha);
			this.undo_btm.addEventListener(FlexEvent.BUTTON_DOWN, this.undo);
			
			this.me_catch_canvas.addEventListener("mouseDown", this.startDrawing);
			this.me_catch_canvas.addEventListener("mouseOut", this.stopDrawind);
			this.me_catch_canvas.addEventListener("mouseUp", this.stopDrawind);
			this.me_catch_canvas.addEventListener("mouseMove", this.drawing);
			
			this.isDrawStarted = false;
			this.addLayer();
		}
		
		/**
		 * ツールボックスの開閉
		 **/
		private function onClickToolBoxBtm(e:FlexEvent):void{
			if(this.isToolboxOpen){
				this.tool_box.x = -this.tool_box_width;
				this.isToolboxOpen = false;
			}else{
				this.tool_box.x = 0;
				this.isToolboxOpen = true;
			}
		}
		
		/**
		 * 描画対象のカンバスを追加する
		 **/
		private function addLayer():void{
			var layer:Canvas = new Canvas();
			layer.width = 2880;
			layer.height = 2880;
			layer.setStyle("horizontalCenter", 0);
			layer.setStyle("verticalCenter", 0);
			this.drawing_canvas.addChild(layer);
			this.current_layer = layer;
		}
		
		/**
		 * Drawを開始する
		 **/
		private function startDrawing(e:Event):void{
			if(this.isDrawStarted){
				return;
			}
			this.draw_x = this.drawing_canvas.mouseX + (2880 - this.width)/2;
			this.draw_y = this.drawing_canvas.mouseY + (2880 - this.height)/2;
			trace("start:" + this.draw_x + "," + this.draw_y);
			this.current_layer.graphics.lineStyle(int(this.line_width_combo.value), this.pen_color_picker.selectedColor, 1);			
			this.current_layer.graphics.moveTo(this.draw_x, this.draw_y);
			this.isDrawStarted = true;
		}
		
		/**
		 * Drawを終了する
		 **/
		private function stopDrawind(e:Event):void{
			if(!this.isDrawStarted){
				return;
			}
			this.addLayer();
			this.isDrawStarted = false;
		}
		
		/**
		 * Drawする
		 **/
		private function drawing(e:Event):void{
			if(!this.isDrawStarted){
				return;
			}
	        this.current_layer.graphics.moveTo(this.draw_x, this.draw_y);
	        this.current_layer.graphics.lineTo(this.drawing_canvas.mouseX + (2880 - this.width)/2, this.drawing_canvas.mouseY + (2880 - this.height)/2);
			this.draw_x = this.drawing_canvas.mouseX + (2880 - this.width)/2;
			this.draw_y = this.drawing_canvas.mouseY + (2880 - this.height)/2;
		}
		
		/**
		 * 取り消す...直前の描画カンバスを削除する
		 **/
		private function undo(e:Event):void{
			var v:int = this.drawing_canvas.getChildren().length;
			trace(v);
			if(v > 1){
				this.drawing_canvas.removeChildAt( v - 2 );
			}
		}
		
		private function onChangeBGAlpha(e:SliderEvent):void{
			this.drawing_canvas.setStyle("backgroundAlpha",this.bg_alpha_slider.value/100);
		}
		
		private function onChangeBGColor(e:Event):void{
			this.drawing_canvas.setStyle("backgroundColor", this.bg_color_picker.value);
		}
		
		public function get content_canvas():Canvas{
			return this.drawing_canvas;
		}
	}
}